<template>
  <div class="market">
    <div class="market_content">
      <div class="title">
        <span>发现好店</span>
        <van-icon name="arrow" class="hot_arrow"/>
      </div>

      <div class="market_list">
        <div class="bg">
          <div class="overlay"></div>
          <div class="market_title">精品美食店</div>

          <img src="../assets/mp15058778_1431610886470_7.jpg" alt>
        </div>

        <van-row type="flex" class="market_box" justify="space-between">
          <van-col span="6" v-for="(marketlist, index) in marketlist" :key="index">
            <img :src="marketlist.imgurl" alt>
            <div>{{marketlist.title}}</div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      marketlist: [
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560309929157&di=d0a97c7e27ae6a68a58d6cea3ffcd7b1&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fhealth%2Fpics%2Fhv1%2F123%2F222%2F2267%2F147468408.jpg",
          title: "￥111"
        },
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560310273814&di=56602538ad3cc06be457f46e07a8ad7e&imgtype=0&src=http%3A%2F%2Fimg1.gtimg.com%2Fhealth%2Fpics%2Fhv1%2F16%2F157%2F2101%2F136657576.jpg",
          title: "￥112"
        },
        {
          imgurl:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2899078570,4272025385&fm=26&gp=0.jpg",
          title: "￥123"
        },
        {
          imgurl:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560310344176&di=62e85b61e749e18170526089f616ed00&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fffa3621a5296b89889662533bbc52e3b9c80931b8cc8-x8b3dU_fw658",
          title: "￥123"
        }
      ]
    };
  }
};
</script>

<style>
.market {
  padding: 10px;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px #f5f6fa solid;
}
.market .title {
  /* float: left; */
  padding: 5px 0px;
  font-size: 17px;
  text-align: center;
  font-weight: 700;
}
.hot_arrow {
  float: right;
}
.market .bg {
  position: relative;
  height: 146px;
  margin-top: 15px;
}
.market .bg img {
  width: 100%;
  height: 146px;
}
.market .bg .overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0.5;
}

.market .bg .market_title {
  position: absolute;
  z-index: 10;
  color: white;
  top: 40%;
  left: 40%;
  border-top: solid 1px white;
  border-bottom: solid 1px white;
}
.market .market_box {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
}
.market .market_box img {
  border-radius: 10px;
  height: 80px;
  width: 90%;
}
</style>
